<template>
  <div class="quote-list">
    <p v-for="(item, index) in infoArr"
       :key="index">
      <label class="labelSty">{{ item.label }}</label>
      <!-- <span class="detail-text">{{item.value}}</span> -->
      <Tooltip v-if="iconName && ['customerName','carrierName'].includes(item.type)"
               :content="content"
               :placement="placement">
        <icon-svg class-name="iconClass mr5"
                  :icon-name="iconName" />
      </Tooltip>
      <text-overflow class="detail-text"
                     :text="item.value" />
    </p>
  </div>
</template>

<script>
import TextOverflow from "@/components/public/TextOverflow.vue";
import Tooltip from "@components/basic/Tooltip.vue";
export default {
  name: "QuoteList",
  components: {
    TextOverflow,
    Tooltip
  },
  props: {
    info: {
      type: Object,
      default: () => {
        return {};
      }
    },
    configData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    placement: {
      type: String,
      default: 'top'
    },
    iconName: String,
    content: String
  },

  computed: {
    infoArr () {
      this.configData.forEach((element) => {
        for (let i in this.info) {
          if (element.type === i) {
            element.value = this.info[i];
          } else {
            if (element.type === "transport") {
              element.data.forEach((item) => {
                if (item.type === i) {
                  item.value = this.info[i];
                }
              });
            }
          }
        }
      });
      return this.configData;
    }
  },
  methods: {
    toTrack (val) {
      console.log("val", val)
    }
  }
};
</script>

<style lang="scss" scope>
.iconClass {
  width: 14px;
  height: 14px;
}
.quote-list {
  // background: #f6f6f6;
  padding: 10px;
  p {
    display: flex;
  }
  .labelSty {
    margin-right: 10px;
    font-size: 16px;
    color: var(--prev-color-text-silvergrey);
    display: inline-block;
    text-align: right;
    width: 120px;
  }
}
.mr5 {
  margin-right: 5px;
}
</style>
